<template>
	<view class="container">
		<view class="title">输入短信验证码</view>
		<view class="subtitle">首次登录需验证手机号码</view>
		<view class="phone-number">
			验证码已发送至 <text style="color: #80B4FF;">{{ maskedPhone }}</text>
		</view>

		<!-- 验证码输入组 -->
		<view class="code-input-group">
			<input v-for="(item, index) in codeLength" :key="index" :ref="`codeInput${index}`"
				v-model="verificationCode[index]" type="number" maxlength="1" class="code-input"
				:focus="index === 0 && isFocus" @input="handleInput(index)" @keyup.delete="handleDelete(index)" />
		</view>

		<button @click="confirmCode" class="submit-button">确认</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				maskedPhone: '+86 123****1234',
				verificationCode: Array(6).fill(''),
				codeLength: 6,
				isFocus: true
			}
		},

		methods: {
			// 核心输入处理
			handleInput(index) {
				this.$nextTick(() => {
					// 自动跳转逻辑
					if (this.verificationCode[index] && index < 5) {
						this.safeFocus(index + 1)
					}
					// 自动提交逻辑
					if (index === 5 && this.verificationCode.every(v => v)) {
						this.confirmCode()
					}
				})
			},

			// 安全焦点控制
			safeFocus(targetIndex) {
				this.$nextTick(() => {
					setTimeout(() => { // 解决安卓设备键盘遮挡问题
						const rawRef = this.$refs[`codeInput${targetIndex}`]

						// 处理uni-app数组式ref存储
						const ref = Array.isArray(rawRef) ? rawRef : rawRef
						if (!ref) return

						// 多端兼容焦点控制（优先级排序）
						const focusActions = [
							() => ref.$el?.focus(), // 微信小程序
							() => ref.focus(), // H5/APP
							() => ref.input?.focus() // 支付宝小程序
						]

						// 执行第一个有效操作
						focusActions.some(action => {
							try {
								action()
								return true
							} catch (e) {
								return false
							}
						})
					}, 50) // 安卓设备需要额外延迟
				})
			},

			// 删除键处理
			handleDelete(index) {
				if (!this.verificationCode[index] && index > 0) {
					this.verificationCode.splice(index, 1, '')
					this.safeFocus(index - 1)
				}
			},

			// 确认提交
			confirmCode() {
				const code = this.verificationCode.join('')
				if (code.length !== 6) {
					uni.showToast({
						title: '请输入完整验证码',
						icon: 'none'
					})
					return
				}
				// 实际提交逻辑
				uni.showToast({
					title: '验证成功',
					icon: 'success'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		padding: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.subtitle {
		font-size: 16px;
		color: #666;
		margin-bottom: 20px;
	}

	.phone-number {
		font-size: 16px;
		margin-bottom: 30px;
	}

	.code-input-group {
		display: flex;
		justify-content: space-between;
		margin: 60rpx 0;

		.code-input {
			width: 80rpx;
			height: 100rpx;
			border: 2rpx solid #e9ecef;
			border-radius: 12rpx;
			text-align: center;
			font-size: 44rpx;
			transition: all 0.3s;

			&:focus {
				border-color: #80B4FF;
				box-shadow: 0 0 20rpx rgba(128, 180, 255, 0.2);
			}
		}
	}

	.submit-button {
		background: linear-gradient(90deg, #80B4FF, #6699FF);
		color: white;
		border-radius: 6px;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
	}
</style>